.input_head {
    position: relative;
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 0 20px;

    .left,
    .rig {
        position: relative;
        display: flex;
        gap: 4px;
        font-size: 22px;
    }

    .expression,
    .send_file,
    .screenshot,
    .record,
    .voice_chat,
    .video_chat {
        width: 24px;
        height: 24px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #494949;
        cursor: pointer;

        &:hover {
            color: #181818;
        }
    }
    .send_file {
        font-size: 16px;
    }

    .left {
        .emoticon {
            position: absolute;
            z-index: 2;
            top: -380px;
            left: -194px;
            width: 412px;
            height: 366px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.15);
            user-select: none;
            -webkit-user-select: none;

            &::after {
                content: "";
                position: absolute;
                z-index: 1;
                bottom: -20px;
                left: 50%;
                transform: translateX(-50%);
                width: 0;
                height: 0;
                border: 10px solid transparent;
                border-top: 10px solid #fff;
            }

            .emoji_wrap {
                position: relative;
                width: 100%;
                height: 312px;
                box-sizing: border-box;
                padding: 25px 0 0 10px;

                .emoji_main1 {
                    position: relative;
                    width: 100%;
                    height: 100%;

                    .title {
                        font-size: 13px;
                        box-sizing: border-box;
                        padding-left: 5px;
                    }

                    .emoji_ul {
                        width: 100%;
                        min-height: 40px;
                        display: flex;
                        flex-wrap: wrap;
                        gap: 10px;
                        box-sizing: border-box;
                        padding-top: 10px;

                        li {
                            width: 40px;
                            height: 40px;
                            display: flex;
                            justify-content: center;
                            align-items: center;

                            img {
                                width: 28px;
                                height: 28px;
                                transition: width 0.1s, height 0.1s;
                            }

                            &:hover {
                                background-color: #f2f2f2;
                                border-radius: 4px;

                                img {
                                    width: 32px;
                                    height: 32px;
                                    transition: width 0.1s, height 0.1s;
                                }
                            }
                        }
                    }
                }

                .emoji_main2 {
                    position: relative;
                    width: 100%;
                    height: 100%;

                    .title {
                        font-size: 13px;
                        box-sizing: border-box;
                        padding-left: 5px;
                    }

                    .emoji_ul {
                        width: 100%;
                        min-height: 46px;
                        display: flex;
                        flex-wrap: wrap;
                        gap: 11px;
                        box-sizing: border-box;
                        padding-top: 15px;

                        li {
                            width: 46px;
                            height: 46px;
                            display: flex;
                            justify-content: center;
                            align-items: center;

                            img {
                                width: 44px;
                            }

                            &:hover {
                                background-color: #f2f2f2;
                                border-radius: 4px;
                            }
                        }
                    }
                }
            }

            .emoji_tab {
                width: 100%;
                height: 52px;
                display: flex;
                align-items: center;
                gap: 10px;
                box-sizing: border-box;
                padding-left: 10px;
                border-top: 1px solid #f2f2f2;

                span {
                    box-sizing: border-box;
                    padding: 2px 8px;
                    border-radius: 2px;
                    color: #181818;
                    font-size: 14px;
                    cursor: pointer;

                    &.active {
                        background-color: #95ec69;
                        color: #fff;
                        font-size: 15px;
                    }
                }
            }
        }
    }
}
